<template>
  <div class="order">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 主体内容 -->
    <main>
      <div class="choice">
        <!-- 下拉筛选 -->
        <div class="type">
          <span>订单类型：</span>
          <el-select
            v-model="filterType"
            @change="Change"
            placeholder="选择类型"
          >
            <el-option
              v-for="(state, index) in statuses"
              :key="state"
              :label="state"
              :value="index"
            ></el-option>
          </el-select>
        </div>
        <form action="">
          <span>搜索：</span>
          <el-input
            placeholder="请输入手机号/用户名/订单号"
            icon="search"
            v-model="val"
            class="search-input"
          >
          </el-input>
          <el-button type="primary">查询</el-button>
        </form>
        <i></i>
      </div>
      <!-- 表格 -->
      <el-table :data="tables" border stripe center style="width: 100%">
        <el-table-column label="序号" type="index" width="60"></el-table-column>
        <el-table-column label="编号" width="100">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.num }}</span>
          </template>
        </el-table-column>
        <el-table-column label="用户名" width="125">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="手机号" width="100">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.tel }}</span>
          </template>
        </el-table-column>
        <el-table-column label="类型" width="100">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.type }}</span>
          </template>
        </el-table-column>
        <el-table-column label="支付金额" width="100">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.pay }}.00</span>
          </template>
        </el-table-column>
        <el-table-column label="支付时间" width="165">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.time }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope" width="90">
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      val: "",
      statuses: ["二手房出租", "有房出租", "我想买个房"],
      filterType: "",
    }
  },
  created() {
    /// 请求数据接口
    this.$api.getOrder().then((res) => {
      this.tableData = res.data.data.data;
    })
  },
  methods: {
    ///删除表格展示行数据
    handleDelete(row) {
      this.$api.delOrder(row.id).then((res) => {
        this.$message.success(res.data.message);
        this.$api.getOrder().then((res) => {
          this.tableData = res.data.data.data;
        })
      })
    },
    /// 下拉筛选
    Change() {
      if (this.filterType === 0) {
        this.$api.switchOrder({ type: "二手房出租" }).then((res) => {
          this.tableData = res.data.data;
        })
      } else if (this.filterType === 1) {
        this.$api.switchOrder({ type: "有房出租" }).then((res) => {
          this.tableData = res.data.data;
        })
      } else {
        this.$api.switchOrder({ type: "我想买个房" }).then((res) => {
          this.tableData = res.data.data;
        })
      }
    }
  },
  computed: {
    /// 监听表格变化
    tables: function () {
      const val = this.val;
      if (val) {
        return this.tableData.filter((dataNews) => {
          return Object.keys(dataNews).some((key) => {
            return String(dataNews[key]).toLowerCase().indexOf(val) > -1;
          });
        });
      }
      return this.tableData;
    },
  },
};
</script>

<style lang='scss' scoped>
.order {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .el-breadcrumb {
    width: 100%;
    height: 30px;
    line-height: 30px;
  }
}
main {
  flex: 1;
  overflow-y: scroll;
  .choice {
    width: 100%;
    height: 60px;
    line-height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    form {
      display: flex;
      align-items: center;
      .el-input {
        margin-left: 15px;
      }
      span {
        width: 100px;
        text-align: center;
      }
    }
  }
  .content {
    width: 100%;
    height: auto;
  }
}
</style>